<template>
	<el-radio-group v-model="selected" :class="['sw_dict_wrapper', elForm.size]">
		<el-radio v-for="(item, index) in dictEnumData" :key="index" :label="item.value">{{ item.label }}</el-radio>
	</el-radio-group>
</template>

<script>
import { mapGetters } from 'vuex';
import emitter from 'element-ui/src/mixins/emitter';
export default {
	mixins: [emitter],
	name: 'swDictRadio',
	inject: { elForm: { default: () => null } },
	props: {
		value: { type: String, default: '' },
		dictName: { type: String, default: '' },
		props: {
			type: Object,
			default() {
				return { label: 'msg', value: 'value' };
			}
		}
	},
	data() {
		return {
			selected: this.value
		};
	},
	computed: {
		...mapGetters(['dictEnums']),
		dictEnumData() {
			let dataArr = this.dictEnums[this.dictName] || [];
			return dataArr.map((item) => {
				return { label: item[this.props.label], value: item[this.props.value] };
			});
		}
	},
	watch: {
		value(value) {
			this.selected = value;
		},
		selected(value) {
			this.$emit('input', value);
			this.dispatch('ElFormItem', 'el.form.change', [value]);
		}
	}
};
</script>

<style lang="scss" scoped>
.el-radio-group.sw_dict_wrapper {
	padding-top: 6px;
	&.medium {
		padding-top: 4px;
	}
	&.small {
		padding-top: 2px;
	}
	&.mini {
		padding-top: 0;
	}
	.el-radio {
		display: inline-flex;
		padding: 7px 0;
	}
	&:deep(.el-radio__input) {
		font-size: 0;
	}
	&:deep(.el-radio__label) {
		line-height: 1;
	}
}
</style>
